import React, { useState } from 'react';
import { Button } from 'antd';
import LicenseModal from '@/pages/components/modal/LicenseModal';
import { SvgIcon } from '@/components/icon';
import usePermission from '@/hooks/event/usePermission';

const LicenseBanner: React.FC = () => {
  const [isLicenseModalOpen, setIsLicenseModalOpen] = useState(false);
  const { isAdmin } = usePermission();

  const handleActivateClick = () => {
    setIsLicenseModalOpen(true);
  };

  const handleLicenseCancel = () => {
    setIsLicenseModalOpen(false);
  };

  return (
    <>
      <div className="flex items-center justify-between bg-[#FF942F] h-12 px-4">
        {/* 左侧内容：图标和文字 */}
        <div className="flex-grow flex items-center justify-center text-white space-x-2">
          <SvgIcon
            icon="rj-license-warning"
            size={30}
          />
          <span className="text-white">{`暂未获得授权，无法使用${isAdmin ? '，请输入授权码激活' : '，请通知管理员输入授权码激活'}`}</span>
        </div>
        {/* 右侧按钮 */}

        {
          isAdmin &&
          <Button
            type="primary"
            onClick={handleActivateClick}
            style={{
              boxShadow: 'none'
            }}
          >
            去激活
          </Button>
        }
      </div>

      <LicenseModal
        visible={isLicenseModalOpen}
        onCancel={handleLicenseCancel}
      />
    </>
  );
};

export default LicenseBanner;